<template >
  <div v-loading="!dashboardData.onlineInfo">
    <div class="dashboard-container" v-if="dashboardData.onlineInfo">
      <!-- 顶部数据卡片 -->
      <el-row :gutter="20" class="card-row">
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="data-card">
              <div>
                <div class="card-title">总用户数</div>
                <div class="card-value">
                  {{ dashboardData.onlineInfo.userCount || 0 }}
                </div>
              </div>
              <img src="@/assets/images/数据分析-总用户人数.svg" alt="" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="data-card">
              <div>
                <div class="card-title">在招职位</div>
                <div class="card-value">
                  {{ dashboardData.onlineInfo.postCount || 0 }}
                </div>
              </div>
              <img src="@/assets/images/数据分析-在招职位.svg" alt="" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="data-card">
              <div>
                <div class="card-title">简历投递</div>
                <div class="card-value">
                  {{ dashboardData.onlineInfo.interviewCount || 0 }}
                </div>
              </div>
              <img src="@/assets/images/数据分析-简历投递.svg" alt="" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="data-card">
              <div>
                <div class="card-title">活跃用户数</div>
                <div class="card-value">
                  {{ dashboardData.onlineInfo.onlineUsers || 0 }}
                </div>
              </div>
              <img src="@/assets/images/数据分析-活跃用户.svg" alt="" />
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 图表区域 -->
      <tb
        :dashboardData="dashboardData"
        :timeRange="timeRange"
        @updateTimeRange="updateTimeRange"
      />
      <!-- 最新职位列表 -->
      <el-card class="table-card">
        <div slot="header">
          <span>最新职位发布</span>
        </div>
        <el-table :data="dashboardData.newestPost" style="width: 100%">
          <el-table-column prop="postname" label="职位名称"></el-table-column>
          <el-table-column prop="company" label="企业名称"></el-table-column>
          <el-table-column prop="address" label="工作地点"></el-table-column>
          <el-table-column prop="salary" label="薪资范围"></el-table-column>
          <el-table-column prop="createtime" label="发布时间">
            <template slot-scope="scope">
              {{ scope.row.createtime.split(" ")[0] }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="{ row }">
              <el-tag type="warning" v-if="row.status == 0">已暂停</el-tag>
              <el-tag type="success" v-else-if="row.status == 1">招聘中</el-tag>
              <el-tag type="danger" v-else>已结束</el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column> -->
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import tb from "@/views/record/echarts.vue";
import { getHomepageInfo } from "@/api/record/recordapi";
export default {
  name: "Dashboard",
  components: {
    tb,
  },
  data() {
    return {
      dashboardData: [],
      latestJobs: [],
      timeRange: "7",
    };
  },
  mounted() {
    this.fetchDashboardData();
  },
  methods: {
    // 获取首页数据
    async fetchDashboardData() {
      try {
        const res = await getHomepageInfo();
        if (res.code === 200) {
          // console.log(res);
          // return;
          this.dashboardData = res.data;
          this.$message.success("获取首页数据成功");
        }
      } catch (error) {
        this.$message.error("获取首页数据失败");
      }
    },
    updateTimeRange(newTimeRange) {
      this.timeRange = newTimeRange;
      // 根据新的时间范围重新获取数据
      this.fetchDashboardData();
    },
  },
};
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 20px;
  .card-row {
    margin: 0 0 20px 0;
    .data-card {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      .card-title {
        font-size: 14px;
        color: #909399;
      }

      .card-value {
        font-size: 24px;
        font-weight: bold;
        margin: 10px 0;
      }

      img {
        margin-right: 20px;
        height: 60px;
      }
    }
  }
}

.card-trend {
  font-size: 12px;
}

.card-trend.up {
  color: #67c23a;
}

.card-trend.down {
  color: #f56c6c;
}

.table-card {
  margin-top: 20px;
}
</style>
